import { getCssVariableValue } from '@/utils/utils';

// 计算最大值
export function calMax(arr) {
  let max = Math.max(...arr);
  let maxint = Math.ceil(max / 9.5);
  let maxval = maxint * 10;
  if (maxval == 0 || max < 1) {
    maxval = 1;
  }
  return maxval;
}
export function isEmpty(value) {
  return value === 0 || value === '0' ? value : value || null;
}
export const rangeColor = [
  '#5470c6',
  '#91cc75',
  '#fac858',
  '#ee6666',
  '#73c0de',
  '#3ba272',
  '#fc8452',
  '#9a60b4',
  '#ea7ccc',
];
// 系列相关
export function getSeri({ type, name, color, ...others }) {
  let config = {
    type,
    name,
    itemStyle: { color },
  };
  if (type === 'line') {
    config = {
      ...config,
      symbol: 'none',
      lineStyle: { width: 1 },
    };
  } else if (type === 'bar') {
    config = {
      barMaxWidth: 20,
      ...config,
    };
  }
  return {
    ...config,
    ...others,
  };
}

// 基础配置
export const getOptions = ({
  titleText,
  remSize,
  XAXIS,
  yAxis,
  grid,
  legendData,
  yGrid,
  tooltip,
}) => {
  return {
    title: {
      text: titleText,
      show: true,
      top: 8 * remSize,
      left: -4 * remSize,
      textStyle: {
        fontSize: 14 * remSize,
        fontWeight: 300,
        lineHeight: 14 * remSize,
        color: '#FFFFFF',
      },
    },
    grid: grid || {
      top: 52 * remSize,
      left: ((yGrid || 36) + 40) * remSize,
      bottom: (22 + Math.ceil((legendData?.length || 1) / 6) * 30) * remSize,
      right: 0 * remSize + 30,
    },
    tooltip: {
      trigger: 'axis',
      padding: [12 * remSize, 17 * remSize],
      formatter: (params) => {
        if (tooltip) return tooltip(params);
        let res = '<div  style="font-size:12px">';
        params.forEach((item) => {
          res += `<span style=\"display:flex;align-items: center;justify-content: space-between;\">
            <span style=\"\">${item.marker}${item.seriesName}</span><span style=\"padding-left:20px\">`;
          res +=
            `${
              parseFloat(item.data).toFixed(3) === 'NaN' ? '-' : parseFloat(item.data).toFixed(3)
            }` + '<br/>';
          res += `</span></span>`;
        });
        return `<span style=\"font-size:12px\">` + params[0].name + '</span><br/>' + res + '</div>';
      },
      position: function (point, params, dom, rect, size) {
        let x = 0;
        let y = 0;
        const pointX = point[0];
        const pointY = point[1];
        const boxWidth = size.contentSize[0];
        const boxHeight = size.contentSize[1];
        if (boxWidth > pointX) {
          x = pointX + 15;
        } else {
          x = pointX - boxWidth - 15;
        }
        if (boxHeight > pointY) {
          y = 5;
        } else {
          y = pointY - boxHeight;
        }
        return [x, y];
      },
      show: true,
      backgroundColor: '#161A1D',
      borderColor: '#161A1D',
      borderWidth: 1,
      textStyle: {
        color: '#A7A8A9',
        fontFamily: 'PingFang SC',
        fontStyle: 'none',
      },
    },
    legend: {
      right: 'center',
      top: 'bottom',
      width: '100%',
      itemGap: 13,
      itemWidth: 16,
      itemHeight: 8,
      textStyle: {
        color: getCssVariableValue('--chart-legend-color'),
        fontSize: 12 * remSize,
        height: 14 * remSize,
        lineHeight: 17 * remSize,
      },
      padding: 0,
      data: legendData,
      inactiveColor: '#545454',
      inactiveBorderColor: '#545454',
      inactiveBorderWidth: 'inherit',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: XAXIS.map((v) => v || ''),
      splitNumber: Math.random(),
      triggerEvent: true,
      boundaryGap: ['0%', '0%'],
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: getCssVariableValue('--bd-a50'),
        },
      },
      axisLine: {
        show: true,
        onZero: false,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      axisTick: {
        alignWithLabel: true,
        lineStyle: {
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      axisLabel: {
        // showMaxLabel: false,
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        formatter: (value) => {
          const _label = value.split('');
          return _label.length > 10 ? value.substring(0, 9) + '...' : value;
        },
        fontSize: 12 * remSize,
        lineHeight: 12 * remSize,
        margin: 9 * remSize,
      },
    },
    yAxis: yAxis || {
      type: 'value',
      axisLine: {
        show: false,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 12 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  };
};
// 年计划 单个场站
export function PlanYearBar(data = {}, remSize) {
  const { dataArray = [], XAXIS = [] } = data;
  const yAxis = () => {
    return [
      {
        type: 'value',
        name: 'MWh',
        nameTextStyle: {
          align: 'right',
          color: getCssVariableValue('--chart-font-color'),
        },
        axisLine: {
          show: false,
          onZeroAxisIndex: 1,
        },
        axisTick: {
          alignWithLabel: true,
          length: 4,
          lineStyle: {
            color: getCssVariableValue('--chart-y-line'),
          },
        },
        axisLabel: {
          color: getCssVariableValue('--chart-font-color'),
          fontStyle: 'DIN-Light',
          fontSize: 12 * remSize,
          margin: 8 * remSize,
          height: 14 * remSize,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: getCssVariableValue('--chart-y-line'),
          },
        },
      },
    ];
  };
  const option = {
    ...getOptions({
      remSize,
      XAXIS,
      // yAxis: { ...yAxis() },
      tooltip: (params) => {
        let res = '<span  style="font-size:12px">';
        res += `<span style=\"display:flex;align-items: center;justify-content: space-between;\">
      <span style=\"\">${
        params[0].marker + params[0].name
      }</span><span style=\"padding-left:20px\">`;
        res += `${
          parseFloat(params[0].data.value).toFixed(3) === 'NaN'
            ? '-'
            : parseFloat(params[0].data.value).toFixed(3)
        }`;
        res += `</span></span>`;
        return res + '</span>';
      },
    }),
  };
  return {
    ...option,
    series: [
      getSeri({
        type: 'bar',
        data: dataArray.map((t, i) => {
          return {
            value: t,
            itemStyle: {
              color: rangeColor[i % 9],
            },
          };
        }),
      }),
    ],
  };
}
// 年计划 全部场站
export function PlanYearLine(data = {}, remSize) {
  const { dataArray = [], XAXIS = [] } = data;
  const yGrid =
    String(
      calMax(
        dataArray.map((t) => {
          return calMax(t.data.map((_t) => (_t === 'NaN' ? 0 : _t)));
        }),
      ),
    ).length * 8;
  const yAxis = () => [
    {
      type: 'value',
      name: 'MWh',
      nameTextStyle: {
        align: 'right',
        color: getCssVariableValue('--chart-font-color'),
      },
      axisLine: {
        show: false,
        onZeroAxisIndex: 1,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 14 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const legendData = dataArray.map((t, i) => {
    return {
      name: t.name,
      itemStyle: i === 0 ? { opacity: 1, borderWidth: 1 } : {},
    };
  });
  const option = getOptions({
    remSize,
    XAXIS,
    yAxis: yAxis(),
    legendData,
    yGrid,
  });
  return {
    ...option,
    series: dataArray.map((t, i) =>
      getSeri({
        type: 'line',
        name: t.name,
        smooth: true,
        data: t.data,
        itemStyle: { opacity: 0 },
        lineStyle: {
          width: 1,
          type: i === 0 ? 'solid' : 'dashed',
        },
      }),
    ),
  };
}
// 月计划
export function PlanMonthLine(data = {}, remSize) {
  const { dataArray = [], XAXIS = [] } = data;
  const yGrid =
    String(
      calMax(
        dataArray.map((t) => {
          return calMax([
            t.January,
            t.February,
            t.March,
            t.April,
            t.May,
            t.June,
            t.July,
            t.August,
            t.September,
            t.October,
            t.November,
            t.December,
          ]);
        }),
      ),
    ).length * 8;
  const yAxis = [
    {
      type: 'value',
      name: 'MWh',
      nameTextStyle: {
        align: 'right',
        color: getCssVariableValue('--chart-font-color'),
      },
      axisLine: {
        show: false,
        onZeroAxisIndex: 1,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 14 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const legendData = dataArray.map((t, i) => {
    return {
      name: t.title,
      itemStyle: i === 0 ? { opacity: 1, borderWidth: 1 } : {},
    };
  });
  const option = getOptions({
    remSize,
    XAXIS,
    yAxis,
    legendData,
    yGrid,
  });
  return {
    ...option,
    series: dataArray.map((t, i) =>
      getSeri({
        type: 'line',
        name: t.title,
        smooth: true,
        data: [
          isEmpty(t.January),
          isEmpty(t.February),
          isEmpty(t.March),
          isEmpty(t.April),
          isEmpty(t.May),
          isEmpty(t.June),
          isEmpty(t.July),
          isEmpty(t.August),
          isEmpty(t.September),
          isEmpty(t.October),
          isEmpty(t.November),
          isEmpty(t.December),
        ],
        itemStyle: { opacity: 0 },
        lineStyle: {
          width: 1,
          type: i === 0 ? 'solid' : 'dashed',
        },
      }),
    ),
  };
}
// 年计划 多项
export function PlanYearAllPowerBar(data = {}, remSize) {
  const { dataArray = [], XAXIS = [] } = data;
  const yAxis = [
    {
      type: 'value',
      name: 'MWh',
      nameTextStyle: {
        align: 'right',
        color: getCssVariableValue('--chart-font-color'),
      },
      axisLine: {
        show: false,
        onZeroAxisIndex: 1,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 14 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const option = getOptions({
    remSize,
    XAXIS,
    yAxis,
  });
  return {
    ...option,
    series: dataArray.map((t, i) =>
      getSeri({
        type: 'bar',
        name: t.name,
        data: t.data,
      }),
    ),
  };
}
